<template>
 <div class="container">
  <div class="header_container">
    <el-upload
      class="avatar-uploader"
      action="http://localhost:80/storehead/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div class="msg">店铺头像</div>
 </div>
 <div class="form_body">
   <el-form :label-position="labelPosition" :rules="rules"  class="form" ref="formData" label-width="80px" :model="formData">
        <el-form-item label="店铺名" prop="storeName">
            <el-input v-model="formData.storeName"></el-input>
        </el-form-item>
        <el-form-item label="店铺公告" prop="store_announce">
            <el-input v-model="formData.store_announce"></el-input>
        </el-form-item>
        <el-form-item label="人均消费" prop="perCapita">
            <el-input v-model.number="formData.perCapita"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop="location">
            <el-input v-model="formData.location"></el-input>
        </el-form-item>
        <!-- <el-dropdown split-button type="primary">
          选择分类
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
        <!-- <el-form-item label="类别">
          <el-select v-model="formData.category" placeholder="请选择店铺分类">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="类别">
          <el-select v-model="type_id" placeholder="请选择店铺类别">
            <el-option
              v-for="item in choose_cate"
              :key="item.type_id"
              :label="item.name"
              :value="item.type_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" class="btn" @click="submitForm('formData')">修改</el-button>
    </el-form>
 </div>
  </div>
</template>

<script>
import { post, get } from '../../assets/http'

export default {
  name: 'StoreManage',
  data () {
    return {
      imageUrl: '',
      labelPosition: 'right',
      formData: {
        storeName: '',
        store_announce: '',
        perCapita: '',
        location: '',
        type_id: ''
      },
      choose_cate: [
        // {
        //   name: '缤纷水果',
        //   type_id: 'shuiguo'
        // },
        // {
        //   name: '香喷奶茶',
        //   type_id: 'naicha'
        // },
        // {
        //   name: '可口芬达',
        //   type_id: 'fenda'
        // }
      ],
      type_id: '',
      rules: {
        storeName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' },
          { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
        ],
        store_announce: [
          { min: 0, max: 20, message: '最多20个字', trigger: 'blur' }
        ],
        perCapita: [
          { required: true, message: '人均不能为空', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请填写店铺地址', trigger: 'blur' },
          { min: 5, max: 40, message: '地址字数限制在5-40个字符', trigger: 'blur' }
        ]
      }
    }
  },
  async mounted () {
    // 1.请求服务器获取 分类信息
    var res = await get('getCategory')
    this.choose_cate = res
    // 2. 请求服务器获取  店铺信息
    var result = await get('store/getStoreMsg', {store_id: this.$route.query.store_id})
    if (result.flag) {
      // console.log(result)
      this.imageUrl = result.data.store_img_url
      this.formData = result.data
      this.type_id = result.data.type_id
    }
  },
  methods: {
    // 提交店铺信息  在后台不能添加，而是应该修改
    async  submitForm (form) {
      if (this.type_id.length < 1) {
        this.$message.error('请选择店铺分类')
        return
      }
      if (this.imageUrl.length < 1) {
        this.$message.error('请上传店铺头像')
        return
      }

      this.$refs[form].validate(async (valid) => {
        if (valid) {
          var storeId = this.$route.query.store_id
          var res = await post('store/update/msg', {
            storeName: this.formData.storeName,
            store_announce: this.formData.store_announce,
            perCapita: this.formData.perCapita,
            location: this.formData.location,
            type_id: this.type_id,
            store_img_url: this.imageUrl,
            store_id: storeId })
          if (res.flag) {
            this.$message({message: '修改成功', type: 'success'})
          }
        }
      })
    },
    beforeAvatarUpload (file) {
      // 上传前
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      // console.log(file.type)
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess (res, file) {
      // console.log(res)
      // console.log(file)
      if (res.flag) {
        this.imageUrl = res.url
        this.$message.success('上传成功')
      } else {
        this.$message.error('上传失败，请检查网络')
      }
      // 上传成功
      // this.imageUrl = URL.createObjectURL(file.raw)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form_body{
  position: fixed;
  width: 30%;
  /* margin-top: 100px; */
  /* margin-left: 35%; */
  top: 15%;
  left: 30%;
}
.header_container{
  /* border: 1px solid #000; */
  margin-left: 10%;
  margin-top: 5%;
  width: 20%;
  display: flex;
  flex-direction: column
}
.msg{
  /* text-align: center; */
  margin-left: 20%;
}
/*
 .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid red;
  }
  .avatar-uploader-icon {
    border: 1px dashed #8c939d;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
*/
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
